<template>
    <el-row :gutter="20">
        <el-col :span="6">
            <z-page-title value="模版分类" />
            <z-action label='添加分类' mode='dialog' :fields="['title']" type='primary'
                @finish="(result) => addFinish(result, node)" url='/do/put/tem_category' />
            <el-tree ref="tree" node-key="id" :load="loadNode" lazy style="margin-top: 6px">
                <template #default="{ data, node }">
                    <span class="custom-tree-node">
                        <span class="title" @click="select(data)">{{ data.title }}</span>
                        <span class="action">
                            <z-action icon="plus" type="text" :title="'添加' + data.title + '子分类'"
                                url="/do/put/tem_category" :data="{ parentId: data.id }" :fields="['title']"
                                style="margin-right:12px" @finish="(result) => addFinish(result, node)" />
                            <z-action icon="edit" type="text" :title="'编辑' + data.title + '子分类'"
                                url="/do/patch/tem_category" :data="data" :fields="['title']" style="margin-right:12px"
                                @finish="(result) => edit(result, node)" />
                            <z-action icon="x" type="text" url="/do/delete/tem_category" mode="confirm" :data="data"
                                :title="'刪除' + data.title + '分类'" @finish="(result) => remove(result)" />
                        </span>
                    </span>
                </template>
            </el-tree>
        </el-col>
        <el-col :span="18">
            <z-block href="/system/marketTemplate" :params="params" />
        </el-col>
    </el-row>
</template>

<script>
import configs from './.lowcode/configs';

export default {
    name: 'p-563qs7gq',
    provide: { configs },
    data() {
        return {
            params: null,
        }
    },

    methods: {
        select(data) {
            this.params = { categorys: [data.id] }
            this.$router.push({ query: { categorys: data.id } })
        },
        async loadNode(node, callback) {
            const result = await $.get({ url: "/do/list/tem_category", data: { parentId: node.data.id } })
            const data = Array.isArray(result) ? result : [];
            callback(data);
        },
        async addFinish(result, node) {
            if (node) {
                if (!node.loaded) {
                    // 当节点还未加载时，把新添加的子节点暂存起来
                    node.newChildren = node.newChildren || [];
                    if (!node.newChildren.some(child => child.id === result.id)) {
                        node.newChildren.push(result);
                    }
                } else {
                    // 节点已加载，则直接追加前先检查是否重复
                    const exists = node.childNodes.some(child => child.data.id === result.id);
                    if (!exists) {
                        this.$refs.tree.append(result, node);
                    }
                }
            } else {
                this.$refs['tree'].append(result)
            }
        },
        edit(result, node) {
            console.log(node);
            node.data.title = result.title
        },
        remove(result) {
            this.$refs['tree'].remove(result.id)
        },
    },
}
</script>
<style lang="scss" scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    height: 32px;
    align-items: center;
    justify-content: space-between;
    padding-right: 8px;
}

.title {
    flex: 1;
}

.action {
    width: 80px;
    text-align: right;
}

:deep(.z-action---text) {
    padding-left: 8px;
}
</style>
